<template>
	<page-meta>
		<navigation-bar title="GAL列表缓动加载演示"/>
	</page-meta>
	<view>
		<template v-for="(item, index) in list">
			<gal-css-animate
			animateName="slideInUp"
			duration="600ms"
			timingFunction="ease-in">
				<view class="list">
					<text>{{ item }}</text>
				</view>
			</gal-css-animate>
		</template>
		<gal-css-animate
		:animateName="btnAnimateName"
		duration="600ms"
		timingFunction="ease-in">
			<button class="sub-btn" :plain="true" @tap="init">
				<text>加载数据</text>
			</button>
		</gal-css-animate>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				data: [111, 222, 333, 444, 555, 666, 777, 888],
				btnAnimateName: 'fadeIn'
			}
		},
		methods: {
			init() {
				// 模拟数据载入
				this.data.forEach((item, index) => {
					setTimeout(() => {
						this.btnAnimateName = 'slideInUp'
						this.list.push(item);
					}, (index+1)*300);
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
		padding: 50rpx 30rpx;
	}
	.list {
		padding: 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}
	.sub-btn {
		border-radius: 100rpx;
		border-width: 0;
		background-color: #00BC81;
		color: #FFFFFF;
	}
</style>
